過渡效果 (Transitions)

CSS 過渡效果允許你在元素的屬性發生變化時，控制其變化的時間和方式，使元素平滑地過渡。常見應用包括：

• 元素大小、顏色、透明度等屬性的變化
• 滑入、滑出效果

語法：

.element {
  transition: property duration timing-function delay;
}

• property: 要添加過渡效果的屬性（如 width, background-color）
• duration: 過渡效果持續的時間（如 0.5s）
• timing-function: 過渡的速度曲線（如 ease, linear, ease-in, ease-out）
• delay: 延遲效果開始的時間（如 0s）

範例：

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

這段代碼會在使用者將滑鼠移到 .button 上時，平滑地改變背景顏色。

動畫 (Animations)

與過渡不同，CSS 動畫允許元素在多個時間點變化，不需要使用者觸發。你可以定義一組關鍵幀 (keyframes)，控制元素在每一個時間點應該處於什麼狀態。

語法：

@keyframes animation-name {
  0% { /* 初始狀態 */ }
  100% { /* 結束狀態 */ }
}

.element {
  animation: animation-name duration timing-function delay iteration-count direction;
}

• animation-name: 關鍵幀的名稱
• duration: 動畫持續的時間
• timing-function: 動畫的速度曲線
• delay: 延遲動畫開始的時間
• iteration-count: 動畫重複的次數（如 infinite）
• direction: 動畫的播放方向（如 normal, reverse, alternate）

範例：

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: bounce 1s ease infinite;
}

這段代碼會讓 .ball 這個元素進行持續的彈跳效果。

3. 動態效果最佳實踐

• 適度使用動畫：過度的動畫效果會讓使用者感到不適。
• 使用 will-change 提高性能：讓瀏覽器提前預測需要變動的元素，以提高渲染性能。
• 測試在不同瀏覽器和裝置上的效果，確保一致性。